<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-friendadd"></i>添加管理员账号
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="wp_700">
        <div class="title">
          <h2>新账号创建</h2>
        </div>
        <div class="create_admin">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            label-position="left"
          >
            <el-form-item label="登录名" prop="username">
              <el-input type="text" v-model.trim="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pass">
              <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择角色">
                <el-option label="超级管理员" value="0"></el-option>
                <el-option label="普通管理员" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="真实姓名" prop="truename">
              <el-input type="text" v-model.trim="ruleForm.truename"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
              <el-input type="text" v-model.trim="ruleForm.phone"></el-input>
            </el-form-item>

            <el-form-item label="账号状态">
              <el-radio v-model="ruleForm.status" label="1">启用</el-radio>
              <el-radio v-model="ruleForm.status" label="2">禁用</el-radio>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">创建账号</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from "../../http/api.js";
export default {
  data() {
    var usernameyz = (rule, value, callback) => {
      const regall = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/im;
      if (!value) {
        return callback(new Error("登录名不能为空"));
      }
      if (regall.test(value)) {
        callback(new Error("登录名不允许特殊字符"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      var pasgz = /^[a-zA-Z0-9]{5,17}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!pasgz.test(value)) {
        callback(new Error("密码最少6位，最长18位,且不包括特殊字符"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      var pasgz = /^[a-zA-Z0-9]{5,17}$/;
      if (value === "") {
        callback(new Error("请再次输入密码"));
      }
      if (!pasgz.test(value)) {
        callback(new Error("密码最少6位，最长18位,且不包括特殊字符"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var truenameGz = (rule, value, callback) => {
      var name_reg = /^[\u4e00-\u9fa5]{2,4}$/;
      if (!value) {
        return callback(new Error("真实姓名不能为空"));
      }
      if (!name_reg.test(value)) {
        callback(new Error("请输入正确的姓名"));
      } else {
        callback();
      }
    };
    var phoneGZ = (rule, value, callback) => {
      const regphone = /^1\s*[34578]\s*(\d\s*){9}$/;
      if (!value) {
        return callback(new Error("联系方式不能为空"));
      }
      if (!regphone.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };

    return {
      Token: sessionStorage.getItem("Token"), //登录名给的那个token
      ruleForm: {
        username: "",
        pass: "",
        checkPass: "",
        region: "", //默认选中的角色类型
        truename: "", //真是姓名
        phone: "", //手机号
        status: "1" //账号状态.
      },
      rules: {
        username: [{ required: true, validator: usernameyz, trigger: "blur" }],
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ],
        region: [{ required: true, message: "请选择角色", trigger: "change" }],
        truename: [{ required: true, validator: truenameGz, trigger: "blur" }],
        phone: [{ required: true, validator: phoneGZ, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      //创建账号
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$post(api.admin_creat, {
            token: this.Token,
            user_name: this.ruleForm.username,
            password: this.ruleForm.checkPass,
            authority: this.ruleForm.region,
            real_name: this.ruleForm.truename,
            phone: this.ruleForm.phone,
            status: this.ruleForm.status
          }).then(res => {
            // 返回状态 relogin：登录过期 0：成功 1：不支持的请求方式 2：参数错误 3：账号已存在 4：操作失败
            if (res.status == "relogin") {
              this.$message.error(res.msg);
              this.$router.push('/login')
            }
            if (res.status == "0") {
              this.$message.success(res.msg);
              let that = this;
              setTimeout(function() {                
                that.$router.go(0);//刷新当前页面
              }, 2000);
            }
            else{
              this.$message.error(res.msg);
            }
          })
          .catch(error=>{
            console.log(error)
          })
        } else {
          console.log("提交错误")
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  created() {}
};
</script>
<style scoped>
ul li {
  list-style: none;
}
.wp_700 {
  width: 700px;
  margin: 0 auto;
}
.title {
  text-align: center;
  padding-bottom: 20px;
}
.title h2 {
  font-size: 20px;
  color: #409eff;
}
.list_creata {
  display: none;
}
.list_creata li {
  margin-bottom: 20px;
}
.list_creata li span {
  display: inline-block;
  width: 100px;
  font-size: 16px;
}
.list_creata li .el-input {
  display: inline-block;
  width: 600px;
  font-size: 16px;
}
.list_creata li p {
  padding-top: 10px;
  color: #f00;
  display: none;
}
.el-form-item {
  margin-bottom: 30px;
}
.el-form-item--small .el-form-item__error {
  padding-top: 10px;
}
.sure {
  margin-top: 40px;
  padding: 10px 0;
  text-align: center;
}
.sure button {
  width: 150px;
}
</style>
